{% extends 'rbac/base.html' %}
{% block addcss %}
    <style>
        .font-size-16 {
            font-size: 16px;
        }

        .border_color {
            border-left: solid #ff911e 4px;
            background-color: #ECECEC;

        }

        .i-default {
            font-size: 15px;
            display: inline-block;
            color: #676a6c;
        }

        .add-btn-a {
            padding: 2px 8px;
            margin: -3px;
            color: #fff !important;
        }

        .master {
            background-color: #F1F7FD;
            line-height: 44px;
        }
    .node input{
        width: 13px;
        height: 13px;
    }

    </style>
{% endblock %}
{% block content %}
    {% load menu %}
    {% breadcrumb request %}
    <div class="wrapper wrapper-content animated fadeIn">
        {% csrf_token %}
        <div class="row">
            <div class="col-lg-4">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5><i class="fa fa-th-large "></i>&nbsp;&nbsp;角色列表</h5>

                        <div class="ibox-tools">
                            <a href="{% url 'rbac:role_add' %}" class="right btn btn-primary btn-xs">
                                <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content ">
                        <ul class="list-group">
                            {% for row in all_role_list %}

                                <li class="list-group-item {% if row.id == role_id %}border_color{% endif %}">
                                    <a href="?rid={{ row.id }}">{{ row.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <form method="post">
                    {% csrf_token %}
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5><i class="fa fa-gavel"></i>&nbsp;&nbsp;权限列表</h5>
                            <div class="ibox-tools">
                                {% if role_id %}
                                    <button class="btn btn-xs btn-success"
                                            style="padding: 2px 8px;margin: -3px 0;color: white !important;">
                                        <i class="fa fa-save" aria-hidden="true"></i>
                                        保存
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                        <div class="ibox-content no-padding">
                            <table class="table table-hover">
                                <tbody>
                                {% for item in all_menu_list %}
                                    <tr class="master">
                                        <td>
                                            <i class="fa fa-share-alt" aria-hidden="true"></i>
                                            <span>{{ item.title }}</span>
                                            <div class="float-right">
                                                <div class="check-all">
                                                    <label for="check-all-{{ item.id }}">
                                                        <input id="check-all-{{ item.id }}" type="checkbox">
                                                        全选</label>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    {% if item.children %}
                                        <tr class="node">
                                            <td>
                                                {% for node in item.children %}
                                                    <div class="menu">
                                                        <input type="checkbox" id="permission_{{ node.id }}"
                                                               name="permissions" class=""
                                                               {% if node.id in role_permissions_dict %}checked{% endif %}
                                                               value="{{ node.id }}">
                                                        <label for="permission_{{ node.id }}">{{ node.title }}(菜单)</label>
                                                    </div>
                                                    <div class="second-menu col-sm-12">
                                                        {% for row in node.children %}
                                                            <input type="checkbox" value="{{ row.id }}"
                                                                   id="permission_{{ row.id }}"
                                                                   {% if row.id in role_permissions_dict %}checked{% endif %}
                                                                   name="permissions">
                                                            <label for="permission_{{ row.id }}"
                                                                   class="checkbox-inline ">{{ row.title }}</label>
                                                        {% endfor %}
                                                    </div>

                                                {% endfor %}
                                            </td>

                                        </tr>

                                    {% endif %}
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>

            </div>

        </div>
    </div>
{% endblock %}

{% block addjs %}
    <script>
        $(document).ready(function () {
            $('.check-all input:checkbox').change(function () {
                $(this).parents('.master').next().find(':checkbox').prop('checked', $(this).prop('checked'));
                console.log($(this).parents('.master').next().find(':checkbox'));
            });
        });
    </script>
{% endblock %}